<template>
    <div class="header">
        <my-breadcrumb></my-breadcrumb>
        <div class="user-wrap">
            <search-input
                    @search="search"
            >
            </search-input>
            <my-user
                    @loginOut="loginOut"
                    :userName="userName"
            >
            </my-user>
        </div>

    </div>
</template>

<script>
    import MyBreadcrumb from './Breadcrumb'
    import SearchInput from './Search'
    import MyUser from './User'

    export default {
        name: "index",
        props: {
            userName: String
        },
        components: {
            MyBreadcrumb,
            SearchInput,
            MyUser
        },
        setup(props, context) {
            const loginOut = () => {
                context.emit('loginOut')
            }

            const search = (searchValue) => {
                context.emit('search', searchValue)
            }

            return {
                loginOut,
                search
            }
        }
    }
</script>

<style lang="scss" scoped>
.header {
    display: flex;
    height: 50px;
    padding: 0 20px;
    margin-left: 200px;
    justify-content: space-between;
    box-shadow: 0 1px 4px black;
    align-items: center;
    box-sizing: border-box;

    .user-wrap{
        display: flex;
        align-items: center;
    }
}
</style>